<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="../css/nav1.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>Document</title>
    <style></style>
</head>

<body>
    <!-- 悬浮（购物车，页脚的微信，微博 导航栏的悬浮显示）  输入框的黑体字未做 -->
    <div class="all">
        <!-- 导航栏 -->
        <div class="zdy-yetou">
       <div class="d-flex zdy-tou">
        <div class="nav nav1">
            <div class="nav-item">
                <a href="#" class="nav-link">帮助中心</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-link">收藏</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-link">360官网</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-link">360智慧中心</a>
            </div>           
        </div>
        <div class="nav nav2">
            <div class="nav-item">
                <a href="#" class="nav-link">登录</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-link">注册</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-link  zdy-fu"><img src="../img/shoplist/商城1_看图王.png" alt=""></a>               
            </div>              
        </div>
        <!-- <p>您购物车还没有商品，赶紧去选购吧</p> -->
    </div>
</div>
    <!-- 导航 -->
    <div class="bozi">
        <div class="zdy-navbar">
            <div class="zdy-navbar1  pt-4 pb-3 d-flex">          
            <ul class="nav1 nav">
               <li class="item1 nav-link"><a href="#" class="link1"><img src="../img/shoplist/e9a4ae68ddfcd072a6dd59623f9f64c.jpg" alt=""></a></li>
               <li class="item2 nav-link"><a href="#" class="link2">新品推荐</a></li>
               <li class="item3 nav-link"><a href="#" class="link3">热卖榜单</a></li>
                  </ul>
                  <div class="nav2">
                  <ul class="d-flex ul1">
                      <li class="item1"><input type="text" class="link1 text-dark" placeholder="生态链"></li>
                      <li class="item2"><img src="../img/shoplist/搜索_看图王.png" alt="" class="link2"></li>
                  </ul>
                  <ul class="ul2 nav">
                      <li class="nav-item"><a href="#" class="nav-link p-0 ml-4 pr-1">记录仪</a></li>
                      <li class="nav-item"><a href="#" class="nav-link p-0 pl-2 pr-1">摄像机</a></li>
                      <li class="nav-item"><a href="#" class="nav-link p-0 pl-2 pr-1">路由器</a></li>
                      <li class="nav-item"><a href="#" class="nav-link p-0 pl-2 pr-1">耳机</a></li>
                      <li class="nav-item"><a href="#" class="nav-link p-0 pl-2 pr-1">扫地机</a></li>
                      <li class="nav-item"><a href="#" class="nav-link p-0 pl-2 pr-1">智能手表</a></li>
                  </ul>
              </div>
            </div>
            </div>
    <div class="zdy-bozi">

       <div class="zdy-row1">
          <ol class="breadcrumb">
            <li class="breadcrumb-item">首页</li>
            <li class="breadcrumb-item">全部搜索结果</li>
            <li class="breadcrumb-item">生态链</li>          
          </ol>
        </div>
         <div class="zdy-row2 d-flex">
        <p>分类:</p>
        <div class="ml-4">
            <a href="#" class="zdy-ellipsis ">手机数码/电脑办公</a>            
        </div>
        <div class="ml-4">
            <a href="#">家用电器</a>
        </div>
         </div>
         <div class="zdy-row3 d-flex">
            <p>品牌:</p>
            <a href="#" class="ml-4">360</a>
         </div>
         <div class="zdy-row4 d-flex">
             <p>排序：</p>
            <a href="#" class="ml-2 mr-5" style="color: #23ac38;">默认</a>
            <a href="#" class="mr-5 ml-5">价格</a>
            <a href="#" class="ml-5"><input type="checkbox" id="yes">
                <label for="yes">仅看有货</label></a>
         </div>
    </div>
</div>
    <!-- 商品列表 -->
    <div class="zdy-shoplist mt-4">
            <ul class="row1 d-flex flex-wrap">
                <li class="col1">
                    <a href="./Product details.html"><img src="../img/shoplist/tu1.png" alt="" class="tu"></a>
                    <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                    <a href="#" class="mt-1 mb-1 pice">￥99</a>
                    <a href="#"><button class="btn">加入购物车</button></a>
                </li>
                <li class="col1">
                    <a href="#"><img src="../img/shoplist/tu2.jpg" alt="" class="tu"></a>
                    <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                    <a href="#" class="mt-1 mb-1 pice">￥99</a>
                    <a href="#"><button class="btn">加入购物车</button></a>
                </li>
                <li class="col1 
                ">
                <a href="#"><img src="../img/shoplist/tu3.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a>
            </li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu4.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu5.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu6.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu7.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu8.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu9.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu10.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu11.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu12.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu13.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu1.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu10.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu3.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu5.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu6.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu7.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>
                <li class="col1 
                ">                    
                <a href="#"><img src="../img/shoplist/tu8.png" alt="" class="tu"></a>
                <a href="#" class="mt-0 name">360 自动出泡洗手机 琼灰蓝</a>
                <a href="#" class="mt-1 mb-1 pice">￥99</a>
                <a href="#"><button class="btn">加入购物车</button></a></li>                             
            </ul>
            <!-- 下一页 -->
            <div class="zdy-yema text-center mt-5 mb-5">
                <a href="#"><button class="btn mr-2">首页</button></a>
                <a href="#"><button class="btn mr-2">上一页</button></a>
                <a href="#"><button class="btn bg-primary mr-2">1</button></a>
                <a href="#"><button class="btn mr-2">下一页</button></a>
                <a href="#"><button class="btn mr-2">尾页</button></a>
            </div>
    </div>
    <!-- 页尾 -->
    <div class="footer">
        <!-- 页脚1部分 -->
        <div class="one">
        <div class="footer1">
            <div class="r1 d-flex justify-content-around">
            <div class="c1">
                <h4 class="mb-4">关于商城</h4>
                <p class="pb-2 pp">360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。</p>
                <div class="d-flex">
                <p>关于我们</p>
               
                <div class="ml-3 mr-3"><img src="../img/shoplist/foot1 (1).png " alt=""></div>
                <div><img src="../img/shoplist/foot1 (2).png" alt=""></div>
            </div>
            </div>
            <div class="c2">
                <h4>售后服务</h4>
                <a href="#" class="d-block mt-4">7日无理由退货</a>
                <a href="#" class="d-block">质量问题15日内换货</a>
                <a href="#" class="d-block">保修条款</a>
                <a href="#" class="d-block">服务流程</a>
                <a href="#" class="d-block">许可协议</a>
                <a href="#" class="d-block">隐私政策</a>
            
            </div>
            <div class="c3">
                <h4>帮助中心</h4>
                <a href="#" class="d-block mt-4">用户注册</a>
                <a href="#" class="d-block">会员说明</a>
                <a href="#" class="d-block">登录与密码找回</a>
                <a href="#" class="d-block">购买指南</a>
                <a href="#" class="d-block">支付方式</a>
                <a href="#" class="d-block">配送与说明</a>
            </div>
            <div class="c4 pl-5">
                <h4>联系我们</h4>
                <p class="h3 mt-4">400-6822-360</p>
                <p>周一至周日 9:00-18:00(仅收市话费)</p>
            </div>
            </div>
        </div>
    </div>
         <!-- 页脚2部分 -->
         <div class="two">
         <div class="footer2">
            
             <div class="r1 d-flex justify-content-lg-center">
                 <a href="#" class="">7天无理由退货</a>
                 <a href="#" class="">15天免费换货</a>
                 <a href="#" class="">满99包邮</a>
            </div>
             <div class="r2">
                 <a href="#" class="d-block">@2019-2021 mall.360.cn版权所有</a>
                 <a href="#" class="d-block">京ICP备08010314号-6 营业执照</a>
                 <p>公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证</p>
                 <p>公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360</p>
             </div>
         </div>
        </div>
    </div>
    </div>
    
    <script>
        // <!-- js实验阶段 -->
        // let gouwuche=document.getElementById("zdy-fu")
        // zdy-fu.onsuspend=function(){

        // }

    </script>
</body>

</html>